<template>
  <div class="home">
    <div class="sss">
      <div class="left" :style="{ width: width + 'px' }">left</div>
      <XHandle class="myxhandle" @widthChange="widthChange" />
      <div class="box">
        <div class="mid">mid</div>
        <XHandle class="myxhandle" @widthChange="widthChange2" />
        <div class="right" :style="{ width: width2 + 'px' }">right</div>
      </div>
      <!-- <XHandle  class="myxhandle" @widthChange="widthChange1" /> -->
    </div>
  </div>
</template>


<script>
import XHandle from "@/components/XHandle.vue";

export default {
  data() {
    return {
      width: 300,
      width2: 300,
    };
  },
  components: {
    XHandle,
  },

  methods: {
    widthChange(movement) {
      this.width -= movement;
      if (this.width < 150) {
        this.width = 150;
      }
      if (this.width > 500) {
        this.width = 500;
      }
    },
    widthChange2(movement) {
      this.width2 += movement;
      if (this.width2 < 150) {
        this.width2 = 150;
      }
      if (this.width2 > 500) {
        this.width2 = 500;
      }
    },
  },
};
</script>

<style scoped>
.sss {
  width: 100%;
  display: flex;
  height: 600px;
}
.left {
  width: 300px;
  font-size: 50px;
  background-color: yellow;
}
.right {
  width: 300px;
  background-color: hotpink;
  font-size: 50px;
}
.box {
  display: flex;
  width: 100%;
  background-color: pink;
}
.mid {
  font-size: 50px;
  width: 100%;
  background-color: skyblue;
}
</style>
